<section id="cred-form" class="container page-min-height" *ngIf="(result$ | async) as result">
  <app-breadcrumb></app-breadcrumb>
  <loading-indicator [loading]="result.loading"></loading-indicator>
  <error-message [error]="result.error"></error-message>

  <div class="row mt-4" *ngIf="result.data as record">
    <div class="col-sm-12" *ngIf="(verify$ | async) as verify">
      <h1 class="page-title" id="contentStart" tabindex="-1">{{'name.' + record.credential_type.description | translate}}</h1>

      <div class="row title-links mb-3">
        <div class="col">
          <a [routerLink]="record.topic.link | localize" class="title-link back-link">
            <span class="fa fa-arrow-left left"></span>{{'topic.return-link' | translate}}</a>
        </div>
        <div class="col text-right">
          <app-sharelink [link]="record.link"></app-sharelink>
        </div>
      </div>

      <div class="cred-info" *ngIf="mode == 'view'">

        <div class="row">
          <div class="col-md-4 order-md-1">
            <div class="card card-primary mb-3">
              <div class="card-body">
                <h5>What is a credential?</h5>

                <p>
                A credential is held by an organization, for example a permit or a business licence.
                </p>

                <h5>What is an issuer?</h5>

                <p>
                An issuer issues credentials to organizations listed in the OrgBook BC. For example,
                BC Registries issues credentials for companies incorporated in British Columbia.
                </p>

                <div class="row form-group" *ngIf="! record.revoked">
                  <p class="mb-0">
                  <a [routerLink]="['./verify'] | localize" class="body-link switch-verify">{{ 'cred.verify-link' | translate }}</a>
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-8 order-md-0">

            <div class="row form-group" *ngIf="record.inactive">
              <div class="col-sm-12">
                <div class="alert alert-warning">
                  <h3 translate>cred.inactive</h3>
                  <div translate>cred.inactive-message</div>
                </div>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.revoked">
              <div class="col-sm-12">
                <div class="alert alert-danger">
                  <h3>{{'cred.expired' | translate}} <small>&nbsp;{{record.revoked_date | dateFormat: 'effectiveDateTime'}}</small></h3>
                  <div translate>cred.expired-message</div>
                </div>
              </div>
            </div>

            <ng-container *ngIf="record.credential_set as credset">
              <div *ngIf="credset.latest_credential_id && credset.latest_credential_id != record.id">
                <div class="row form-group" *ngIf="record.revoked">
                  <div class="col-sm-12">
                    <div class="alert alert-info">
                      <h5 class="my-0">
                        <a [routerLink]="record.topic.link.concat(['cred', credset.latest_credential_id]) | localize" class="cred-link" translate>cred.latest-link</a>
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </ng-container>

            <div class="row form-group" *ngIf="record.credential_type">
              <div class="col-sm-12">
                <label class="control-label" translate>cred.cred-type</label>
                <div class="form-field">
                  {{'name.' + record.credential_type.description | translate}}
                </div>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.issuer">
              <div class="col-sm-12">
                <label class="control-label" translate>cred.issuer</label>
                <div class="form-field">
                  <a class="body-link issuer-link" [routerLink]="['/issuer', record.issuer.id] | localize">{{record.issuer.name}}</a>
                </div>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.topic as topic">
              <div class="col-sm-12">
                <label class="control-label" translate>topic.breadcrumb</label>
                <div class="form-field">
                  <p class="mb-1">{{topic.typeLabel | translate}}: <a class="body-link cred-link name" [routerLink]="topic.link | localize">
                    {{topic.preferredName?.text}}
                  </a></p>
                  <p class="mb-0">{{'topic.source-id' | translate}}: <span class="text-identifier">{{topic.source_id}}</span></p>
                </div>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.addresses?.length">
              <div class="col-sm-12">
                <div class="form-field address-list" *ngFor="let address of record.addresses">
                  <label class="control-label" translate>{{address.addressType}}</label>
                  <address-view [record]="address"></address-view>
                </div>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.attributes?.length">
              <div class="col-sm-12">
                <label class="control-label" translate>cred.attributes</label>
                <div class="form-field attributes-outer">
                  <attribute-list [records]="record.attributes_ext"></attribute-list>
                </div>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.effective_date">
              <div class="col-sm-12">
                <label class="control-label" translate>cred.start-date</label>
                <!-- filter out effective dates that don't make sense, set when we can't determine a "proper" effective date -->
                <div class="form-field" *ngIf="record.effective_date > '0100-01-01'; else ifBlank">
                  <span class="claim-info date">{{record.effective_date | dateFormat: 'effectiveDateTime'}}</span>
                </div>
                <ng-template #ifBlank>
                  <div class="col-sm-8">{{'cred.empty-attribute' | translate}}</div>
                </ng-template>
              </div>
            </div>

            <div class="row form-group" *ngIf="record.create_timestamp">
              <div class="col-sm-12">
                <label class="control-label" translate>general.date-issued</label>
                <div class="form-field">
                  <span class="claim-info date">{{record.create_timestamp | dateFormat: 'effectiveDateTime'}}</span>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="row form-group" *ngIf="record.credential_set as credset">
          <div class="col-sm-12">
            <label class="control-label" translate>cred.timeline-title</label>
            <timeline-view [rows]="timelineRows" [range]="timelineRange"></timeline-view>
          </div>
        </div>

      </div><!-- cred-info -->

      <div class="row form-group" *ngIf="mode == 'verify' || verify.error">
        <div class="col-sm-12">
          <label class="control-label" translate>cred.proof-of-claims</label>
          <loading-indicator [inline]="true" [loading]="verifyLoading || verify.loading"></loading-indicator>
          <error-message [error]="verify.error"></error-message>
          <div class="form-field" *ngIf="verify.data as verifyResult">
            <span [class]="'proof-icon fa ' + (verifyResult.success ? 'fa-check-circle text-success' : 'fa-times-circle text-danger')"></span>
            <span>{{verifyResult.status | translate}}</span>
            <p *ngIf="! verifyResult.success" class="mt-2 mb-0">{{verifyResult.text}}</p>
          </div>
        </div>
      </div>

      <div class="cred-verify" *ngIf="mode == 'verify' && verify.data as verifyResult">
        <div class="card card-primary mb-3">
          <div class="card-header expand-link" (click)="toggleShowClaims($event)">
            <h2 class="h5 my-0">
              <span translate>cred.claims-proven</span>
              <span [class]="'expand-icon fa ' + (claimsVisible ? 'fa-chevron-up': 'fa-chevron-down')"></span>
            </h2>
          </div>
          <div class="card-body" *ngIf="claimsVisible">
            <div class="text-right">
              <a class="body-link verify-help" href="#">
                <span class="fa fa-question-circle"></span>
                <span translate>cred.whats-this-link</span>
              </a>
            </div>
            <div class="row claim-row" *ngFor="let claim of verifyResult.claims">
              <label class="col-sm-4 control-label text-right">{{claim.name}}</label>
              <div class="col-sm-8">{{claim.value}}</div>
            </div>
          </div>
        </div>

        <div class="card card-primary">
          <div class="card-header expand-link" (click)="toggleShowProof($event)">
            <h2 class="h5 my-0">
              <span translate>cred.proof-details</span>
              <span [class]="'expand-icon fa ' + (proofVisible ? 'fa-chevron-up': 'fa-chevron-down')"></span>
            </h2>
          </div>
          <div class="card-body" *ngIf="proofVisible">
            <div class="pull-right">
              <a class="body-link verify-help" href="#">
                <span class="fa fa-question-circle"></span>
                <span translate>cred.whats-this-link</span>
              </a>
            </div>
            <h3 class="h5 mt-2" translate>cred.schema-info</h3>
            <div class="row">
              <label class="col-sm-3 control-label text-right" translate>schema.name</label>
              <div class="col-sm-9">{{record.credential_type.schema.name}}</div>
            </div>
            <div class="row">
              <label class="col-sm-3 control-label text-right" translate>schema.version</label>
              <div class="col-sm-9">{{record.credential_type.schema.version}}</div>
            </div>
            <ng-container *ngIf="verifyResult.success">
              <h3 class="h5 mt-2" translate>cred.crypto-data</h3>
              <div class="verify-data"><pre>{{verifyResult.text}}</pre></div>
            </ng-container>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>
